<template>
  <view class="home">
    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="500">
      <swiper-item v-for="(item, index) in swiperList" :key="index" @click="navigateTo(item.navigator_url)">
        <image :src="item.image_src"></image>
      </swiper-item>
    </swiper>
  <!-- 导航栏 -->
  <view class="nav">
    <view class="item" v-for="(item, index) in cateList" :key="index" @click="cateListEvent(item.navigator_url)">
      <image :src="item.image_src" mode=""></image>
    </view>
  </view>
  <!-- 楼层区域 -->
  <view class="floor">
    <!-- 楼层选项 -->
    <view class="item" v-for="(item, index) in floorList" :key="index">
      <!-- 楼层的标题 -->
      <view class="title">
        <image :src="item.floor_title.image_src" mode="widthFix"></image>
      </view>
   <!-- 列表区域 -->
   <view class="list">
     <view class="left">
       <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}"
       @click="toList(item.product_list[0].name)"
         mode="widthFix"></image>
     </view>
     <view class="right">
       <template v-for="(subitem, subindex) in item.product_list">
        
       <image v-if="subindex !== 0"  :key="subindex" @click="toList(subitem.name)"
         :src="subitem.image_src" :style="{width: subitem.image_width + 'rpx'}" mode="widthFix"></image>
       </template>
     </view>
   </view>
    </view>
  </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperList:[],
        cateList:[],
        floorList:[]
      };
    },
    onLoad(){
      this.getSwiper()
      this.getcate()
      this.getItemList()
    },
methods:{
async  getSwiper(){
  uni.$showToast("可以调用")
  const {data:{message,meta:{status}}}=await uni.$http.get("/home/swiperdata")
  if(status!==200) return uni.$showToast("获取轮播图失败")
  
  this.swiperList=message
  },
  // 获取分类数据
 async getcate(){
    const {data:{message,meta:{status}}}=await uni.$http.get("/home/catitems")
    if(status!==200) return uni.$showToast("获取分类失败")
    this.cateList=message
  },
  // 获取楼层数据
 async getItemList(){
   const {data:{message,meta:{status}}}=await uni.$http.get("/home/floordata")
   if(status!==200) return uni.$showToast("获取楼层数据失败")
   this.floorList=message
  },
  // 点击轮播图跳转
  navigateTo(url){
    console.log("点击轮播图");
    uni.navigateTo({
      url,
      success: res => {
        console.log(res);
      },
      fail: () => {},
      complete: () => {}
    });
    
  },
  // 点击分类跳转
  cateListEvent(url){
    if(url){
    uni.navigateTo({
      url,
      success:res=>{
        console.log("--res",res);
      }
    })
    }
  
  },
  // 点击图片跳转
  toList(key){
    uni.navigateTo({
      url:`/pages/goods_list/index?query=${key}`
    })
  }
}
  }
</script>

<style lang="scss">
.home {
  swiper {
    height: 360rpx;

    image {
      width: 100%;
      height: 360rpx;
    }
  }
  .nav {
    display: flex;
    margin: 40rpx 0;
    .item {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 140rpx;
        height: 140rpx;
      }
    }
  }

.floor {
  .item {
    .title {
      image {
        width: 100%
      }
    }
  }
.list {
        display: flex;
        margin: 16rpx;
        .left {}
        .right {
          display: flex;
          flex-wrap: wrap;
          image {
            margin-left: 10rpx;
          }
        }
      }
}
}
</style>
